<template>
    <div>
        <!-- ClientOnly 只会在客户端渲染  html结构并非通过服务端返回 -->
        <!-- fallback 渲染完成前的占位符  fallback-tag 占位符的元素  -->
        <!-- <ClientOnly fallback-tag="h4" fallback="loading...">
            only is client
        </ClientOnly> -->

        <!-- 
            该组件中的默认插槽的内容只在客户端渲染
            而fallback插槽的内容只在服务器端渲染
         -->
        <ClientOnly>
            插槽写法
            <!--  -->
            <template #fallback>
                <h3>loading</h3>
            </template>
        </ClientOnly>
        <div><div class="txtColor">全局样式1</div></div>
        <div class="txt">全局样式2</div>

        <!-- 访问public   / 代表就是public文件 -->
        <img src="/user.png" alt="" />

        <!-- 访问assets资源 -->
        <img src="@/assets/images/avatar.png" alt="" />
    </div>
</template>

<script setup lang="ts">
// 路由中间件  监听路由
// definePageMeta({
//     middleware: [
//         (to, form) => {
//             console.log("index 第一个中间件", to, form);
//         },
//     ],
// });

const BASE_URL = "http://codercba.com:9060/juanpi/api";

type ResultData = {
    code: number;
    data: any;
}
//  1.使用 $fetch 来发起网络请求
//  特点： server and client 都会请求一次
// $fetch(BASE_URL + "/homeInfo", {
//     method: "GET",
// }).then((res) => {
//     console.log(res);
// });


// 2. 使用nuxt官方api useAsyncData
// 特点： 在刷新页面时, 可以减少客户端发起的一次请求   
// const { data } = await useAsyncData<ResultData>("homeInfo" , ()=>{
//     return $fetch(BASE_URL + '/homeInfo' , {method:'GET'})
// })
// console.log("data" , data.value?.data);

// 3. useFetch  GET请求  (简写useAsyncData  )
// const { data } = await useFetch<ResultData>('/homeInfo' , {
//     method:"GET",
//     baseURL:BASE_URL,
//     headers:{},
//     query:{
//         name:"liujun"
//     }
// })
// console.log("data" , data.value?.data);


// 4. useFetch  POST请求  (简写useAsyncData  )
const { data } = await useLazyFetch<ResultData>('/goods',{
    method:"POST",
    baseURL:BASE_URL,
    body:{
        count:6
    },
    // 请求拦截器
    // onRequest({request , options }){
    //     console.log("onRequest");
    //     console.log(request);
    //     console.log(options);
    // },
    // 响应拦截器
    // onResponse({request,response , options}){
    //     console.log("onResponse");
    //     console.log(request);
    //     console.log(response);
    //     console.log(options);
    // }
})

console.log("data" , data.value?.data);
onMounted(() => {
    console.log("onMounted");
});
/* 
useFetch 这个api的缺点也很明显 会组织页面导航  
解决方法 使用 useLazyAsyncData / useLazyFetch
*/


</script>

<style scoped></style>
